<template>
  <h2>测试七，使用Hook</h2>
  <p>当前坐标x: {{ point.x }} y:{{ point.y }} </p>
</template>

<script>
//写到了外部文件中实现相应功能
import usepoint from '../hook/changeXY'

export default {
  name: "Hooktest",
  setup() {
    let point =  usepoint()
    //生命周期钩子,在挂载成功后，给window添加了事件鼠标监听
    // onMounted(()=>{
    //   window.addEventListener('mouseover',(event)=>{
    //     console.log(`点击坐标：x:${event.pageX} y:${event.pageY}`)
    //     point.x=event.pageX
    //     point.y=event.pageY
    //
    //   })
    // })

    // 修改为可挂可摘的方法

    // let point = reactive({
    //   x: 0,
    //   y: 0
    // })
    // function changeXY(event) {
    //   console.log(`点击坐标：x:${event.pageX} y:${event.pageY}`)
    //   point.x = event.pageX
    //   point.y = event.pageY
    // }
    //
    // // 挂上
    // onMounted(() => {
    //   window.addEventListener('mouseover', changeXY)
    // })
    // //摘下
    // onUnmounted(() => {
    //   window.removeEventListener('mouseover', changeXY)
    // })

    return {point}
  }
}
</script>
